$(()=>{
  let $width = $('#width'),
      $height = $('#height'),
      $btnCal = $('#calc'),
      $perimeter = $('#perimeter'),
      $area = $('#area'),
      $widthValidate = $('#width-validate'),
      $heightValidate = $('#height-validate'),
      isPassValidate = false;
//  $width.focusout(() =>{
//    let result = validate($width,$widthValidate);
//    console.log(result);
//    isPassValidate = result.isOK;
//    if(!result.isOK){
//      $widthValidate.html(result.reason);
//      $width.select();
//    }else{
//      $widthValidate.html('');
//    }
//  })
//  $height.focusout(()=>{
//    let result = validate($height,$heightValidate);
//    isPassValidate = result.isOK;
//    if(!result.isOK){
//      $heightValidate.html(result.reason);
//      $height.select();
//    }else{
//      $heightValidate.html('');
//    }
//  })

  $btnCal.click(()=>{
    if(!isPassValidate) return;
    let w = Number($width.val()),
        h = Number($height.val());
  //表单级校验
//  if(validate($width,$widthValidate) && validate($height,$heightValidate)){
    let p = (w + h) * 2,
        a = w * h;
    $perimeter.val(p);
    $area.val(a);
//  }
  })
})
function validate(input,output){
  let result = {
    isOK:false,
    reason:''
  }
  if(input.val()===''){
    result.reason = '该字段不能为空';
    output.html(result.reason);
    return result;
  }
  let val = Number(input.val());
  if(isNaN(val)){
    result.reason = '该字段应该为数值';
    return result;
  }
  if(val < 0){
    result.reason = '该数值不能小于零';
    return result;
  }
  result.isOK = true;
  return result;
}
